<template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="维保方案编号 " prop="planNo">
         <el-input
           v-model="queryParams.planNo"
           placeholder="请输入维保方案编号"
           clearable
           @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="维保方案名称" prop="planName">
         <el-input
           v-model="queryParams.planName"
           placeholder="请输入维保方案名称"
           clearable
           @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="设备分类">
        <el-select v-model="queryParams.machineCategoryId" multiple placeholder="请选择">
            <el-option
                           v-for="item in machineCategoryOptions"
                           :key="item.categoryCode"
                           :label="item.categoryName"
                           :value="item.categoryCode"
                           :disabled="item.status == 1"
                        >
            </el-option>
          </el-select>
      </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
           type="warning"
           plain
           icon="Download"
           @click="handleExport"
           v-hasPermi="['system:maintenancePlanDetail:export']"
         >导出</el-button>
       </el-col>
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
    
     <el-form  label="列表" prop="list">
      <el-table v-loading="loading" :data="maintenancePlanDetailList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="主键" align="center" prop="id" v-if="true"/> 
       <el-table-column label="维保分类" align="center" prop="maintenanceCategoryId" >
          <template #default="{row}">
              <el-input v-model="row.maintenanceCategoryId" placeholder="请输入"></el-input>
          </template>
       </el-table-column>
       <el-table-column label="维保措施" align="center" prop="maintenanceMeasure" >
        <template #default="{row}">
              <el-input v-model="row.maintenanceMeasure" placeholder="请输入"></el-input>
          </template>
       </el-table-column>
       <el-table-column label="备件" align="center" prop="maintenanceCategoryId" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template #default="scope">
               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:maintenancePlanDetail:remove']">删除</el-button>
           </template>
       </el-table-column>
     </el-table>
    </el-form>
     
 
     <pagination
       v-show="total>0"
       :total="total"
       v-model:page="queryParams.pageNum"
       v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
 
     <!-- 添加或修改【请填写功能名称】对话框 -->
     <el-dialog :title="title" v-model="open" width="500px" append-to-body>
       <el-form ref="maintenancePlanDetailRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="维保方案编号" prop="planNo">
           <el-input v-model="form.planNo" placeholder="请输入维保方案编号" />
         </el-form-item>
         <el-form-item label="维保方案编号" prop="planName">
           <el-input v-model="form.planName" placeholder="请输入维保方案编号" />
         </el-form-item>
         <el-form-item label="设备分类" prop="maintenanceCategoryId">
           <el-input v-model="form.maintenanceCategoryId" placeholder="请输入设备分类" />
         </el-form-item>
         <el-form-item label="状态(0待审核  1审核通过  2驳回)" prop="maintenanceMeasure">
           <el-input v-model="form.maintenanceMeasure" type="textarea" placeholder="请输入内容" />
         </el-form-item>
         <el-form-item label="创建者" prop="spareParts">
           <el-input v-model="form.spareParts" placeholder="请输入创建者" />
         </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
           <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>
     </el-dialog>
   </div>
 </template>
 
 <script setup name="MaintenancePlanDetail">
 import { listMaintenancePlanDetail, getMaintenancePlanDetail, delMaintenancePlanDetail, addMaintenancePlanDetail, updateMaintenancePlanDetail } from "@/api/system/maintenancePlanDetail";
 
 const { proxy } = getCurrentInstance();
 
 const maintenancePlanDetailList = ref([]);
 const open = ref(false);
 const buttonLoading = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
 const ids = ref([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
 
 const data = reactive({
   form: {},
   queryParams: {
     pageNum: 1,
     pageSize: 10,
     planNo: undefined,
     planName: undefined,
     maintenanceCategoryId: undefined,
     maintenanceMeasure: undefined,
     spareParts: undefined,
     maintenancePlanDetailList: undefined
   },
   rules: {
     id: [
       { required: true, message: "主键不能为空", trigger: "blur" }
     ],
     planNo: [
       { required: true, message: "维保方案编号不能为空", trigger: "blur" }
     ],
     planName: [
       { required: true, message: "维保方案编号不能为空", trigger: "blur" }
     ],
     maintenanceCategoryId: [
       { required: true, message: "设备分类不能为空", trigger: "blur" }
     ],
     maintenanceMeasure: [
       { required: true, message: "状态(0待审核  1审核通过  2驳回)不能为空", trigger: "blur" }
     ],
     spareParts: [
       { required: true, message: "创建者不能为空", trigger: "blur" }
     ]
   }
 });
 
 const { queryParams, form, rules } = toRefs(data);
 
 /** 查询【请填写功能名称】列表 */
 function getList() {
   loading.value = true;
   listMaintenancePlanDetail(queryParams.value).then(response => {
     maintenancePlanDetailList.value = response.rows;
     total.value = response.total;
     loading.value = false;
   });
 }
 
 // 取消按钮
 function cancel() {
   open.value = false;
   reset();
 }
 
 // 表单重置
 function reset() {
   form.value = {
     id: null,
     planNo: null,
     planName: null,
     maintenanceCategoryId: null,
     maintenanceMeasure: null,
     spareParts: null
   };
   proxy.resetForm("maintenancePlanDetailRef");
 }
 
 /** 搜索按钮操作 */
 function handleQuery() {
   queryParams.value.pageNum = 1;
   getList();
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
 }
 
 // 多选框选中数据
 function handleSelectionChange(selection) {
   ids.value = selection.map(item => item.id);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
 }
 
 /** 新增按钮操作 */
 function handleAdd() {
   reset();
   //open.value = true;
   //title.value = "添加【请填写功能名称】";
   maintenancePlanDetailList.value.push({
    "userName":'bb'
  })
 }
 
 /** 修改按钮操作 */
 function handleUpdate(row) {
   loading.value = true
   reset();
   const _id = row.id || ids.value
   getMaintenancePlanDetail(_id).then(response => {
     loading.value = false;
     form.value = response.data;
     open.value = true;
     title.value = "修改【请填写功能名称】";
   });
 }
 
 /** 提交按钮 */
 function submitForm() {
   proxy.$refs["maintenancePlanDetailRef"].validate(valid => {
     if (valid) {
       buttonLoading.value = true;
       if (form.value.id != null) {
         updateMaintenancePlanDetail(form.value).then(response => {
           proxy.$modal.msgSuccess("修改成功");
           open.value = false;
           getList();
         }).finally(() => {
           buttonLoading.value = false;
         });
       } else {
         addMaintenancePlanDetail(form.value).then(response => {
           proxy.$modal.msgSuccess("新增成功");
           open.value = false;
           getList();
         }).finally(() => {
           buttonLoading.value = false;
         });
       }
     }
   });
 }
 
 /** 删除按钮操作 */
 /*function handleDelete(row) {
   const _ids = row.id || ids.value;
   proxy.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + _ids + '"的数据项？').then(function() {
     loading.value = true;
     return delMaintenancePlanDetail(_ids);
   }).then(() => {
     loading.value = true;
     getList();
     proxy.$modal.msgSuccess("删除成功");
   }).catch(() => {
   }).finally(() => {
     loading.value = false;
   });
 }*/

 function handleDelete() {
  maintenancePlanDetailList.value.push({
    "userName":'bb'
  })
 }
 
 /** 导出按钮操作 */
 function handleExport() {
   /*proxy.download('system/maintenancePlanDetail/export', {
     ...queryParams.value
   }, `maintenancePlanDetail_${new Date().getTime()}.xlsx`)*/
   
   //console.info('提交信息：',JSON.stringify(queryParams.value));
   queryParams.maintenancePlanDetailList = maintenancePlanDetailList;
   console.info('提交信息：',JSON.stringify(queryParams.maintenancePlanDetailList.value));
 }
 
 getList();
 </script>
 